var React = require('react');
var AppView = require('../../common/component/view/app-view.node');
var ModalDialog = require('../../common/component/dialog/modal-dialog.node');
var ModalBody = require('../../common/component/dialog/modal-body.node');
var ModalFooter = require('../../common/component/dialog/modal-footer.node');

module.exports = <>
  <AppView viewTitle="${t('ui.security.resource.title.resourceManagement')}">

    <div className="x-search-bar">
      <form>
        <div className="form-row align-items-center">

          <div className="col-auto">
            <label className="sr-only" htmlFor="resourcePath"></label>
            <div className="input-group mb-2">
              <div className="input-group-prepend">
                <div className="input-group-text">{"${t('ui.security.resource.field.resourcePath')}"}</div>
              </div>
              <input type="text" className="form-control" id="resourcePath" data-x-name="searchField.resourcePath"
                data-x-type="autoTrimText" />
            </div>
          </div>

          <div className="col-auto">
            <label className="sr-only" htmlFor="remark"></label>
            <div className="input-group mb-2">
              <div className="input-group-prepend">
                <div className="input-group-text">{"${t('ui.security.resource.field.remark')}"}</div>
              </div>
              <input type="text" className="form-control" id="remark" data-x-name="searchField.remark"
                data-x-type="autoTrimText" />
            </div>
          </div>

          {/* 查询按钮 */}
          <div className="col-auto">
            <button type="button" className="btn btn-primary mb-2" data-x-ui="searchBtn">
              {"${t('ui.system.common.btn.search')}"}
            </button>
          </div>
        </div>
      </form>
    </div>

    <div className="x-tool-bar">
      <button type="button" className="btn btn-outline-primary mb-2 btn-sm" data-x-ui="createBtn">
        {"${t('ui.system.common.btn.create')}"}
      </button>
    </div>

    {/* 资源表格 */}
    <table data-x-ui="resourceTable" className="x-table-custom">
      <thead>
        <tr>
          <th data-field="id" data-visible="false">ID</th>
          <th data-field="resourceTypeDesc">{"${t('ui.security.resource.field.resourceType')}"}</th>
          <th data-field="resourcePath">{"${t('ui.security.resource.field.resourcePath')}"}</th>
          <th data-field="accessMethod">{"${t('ui.security.resource.field.accessMethod')}"}</th>
          <th data-field="accessPolicyDesc">{"${t('ui.security.resource.field.accessPolicy')}"}</th>
          <th data-field="frozenFlagDesc">{"${t('ui.security.resource.field.frozenFlag')}"}</th>
          <th data-field="remark">{"${t('ui.security.resource.field.remark')}"}</th>
          <th>{"${t('ui.system.common.field.operate')}"}</th>
        </tr>
      </thead>
    </table>

    {/* "新建资源"弹出框 */}
    <div data-x-ui="newResourceDialog" className="modal" tabIndex="-1">
      <ModalDialog dialogTitle="${t('ui.security.resource.dialog.newResource')}">
        <ModalBody>
          <form>
            {/* 资源类型 */}
            <div className="form-group x-form-required">
              <label htmlFor="resourceType">{"${t('ui.security.resource.field.resourceType')}"}</label>
              <select type="text" className="form-control" id="resourceType" name="resourceType" data-x-name="new.resourceType">
                <option value="API">{"${t('ui.security.resource.resourceType.api')}"}</option>
                <option value="PAGE">{"${t('ui.security.resource.resourceType.page')}"}</option>
              </select>
            </div>

            {/* 资源路径 */}
            <div className="form-group x-form-required">
              <label htmlFor="resourcePath">{"${t('ui.security.resource.field.resourcePath')}"}</label>
              <input type="text" className="form-control" id="resourcePath" name="resourcePath" data-x-name="new.resourcePath"
                placeholder={"${t('ui.system.common.placeholder.inputTextLimitLength', 1, 500)}"} />
            </div>

            {/* 访问方式 */}
            <div className="form-group x-form-required">
              <label htmlFor="accessMethod">{"${t('ui.security.resource.field.accessMethod')}"}</label>
              <select type="text" className="form-control" id="accessMethod" name="accessMethod" data-x-name="new.accessMethod">
                <option value="*">*</option>
                <option value="GET">GET</option>
                <option value="POST">POST</option>
                <option value="PUT">PUT</option>
                <option value="DELETE">DELETE</option>
              </select>
            </div>

            {/* 访问策略 */}
            <div className="form-group x-form-required">
              <label htmlFor="accessPolicy">{"${t('ui.security.resource.field.accessPolicy')}"}</label>
              <select type="text" className="form-control" id="accessPolicy" name="accessPolicy" data-x-name="new.accessPolicy"
                defaultValue="GRANTED">
                <option value="ANONYMOUS">{"${t('ui.security.resource.accessPolicy.anonymous')}"}</option>
                <option value="AUTHENTICATED">{"${t('ui.security.resource.accessPolicy.authenticated')}"}</option>
                <option value="GRANTED">{"${t('ui.security.resource.accessPolicy.granted')}"}</option>
              </select>
            </div>

            {/* 冻结标志 */}
            <div className="form-group x-form-required">
              <label htmlFor="frozenFlag">{"${t('ui.security.resource.field.frozenFlag')}"}</label>
              <select type="text" className="form-control" id="frozenFlag" name="frozenFlag" data-x-name="new.frozenFlag"
                defaultValue="false">
                <option value="true">{"${t('ui.system.common.option.bool.true')}"}</option>
                <option value="false">{"${t('ui.system.common.option.bool.false')}"}</option>
              </select>
            </div>

            {/* 备注 */}
            <div className="form-group">
              <label htmlFor="remark">{"${t('ui.security.resource.field.remark')}"}</label>
              <input type="text" className="form-control" id="remark" name="remark" data-x-name="new.remark"
                placeholder={"${t('ui.system.common.placeholder.inputTextLimitLength', 0, 50)}"} />
            </div>
          </form>
        </ModalBody>
        <ModalFooter confirmLabel="${t('ui.system.common.btn.save')}" cancelLabel="${t('ui.system.common.btn.cancel')}" />
      </ModalDialog>
    </div>

    {/* "编辑资源"弹出框 */}
    <div data-x-ui="editResourceDialog" className="modal" tabIndex="-1">
      <ModalDialog dialogTitle="${t('ui.security.resource.dialog.editResource')}">
        <ModalBody>
          <form>
            <input type="hidden" id="id" name="id" data-x-name="edit.id" />
            <input type="hidden" id="versionNumber" name="versionNumber" data-x-name="edit.versionNumber" />

            {/* 资源类型 */}
            <div className="form-group x-form-required">
              <label htmlFor="resourceType">{"${t('ui.security.resource.field.resourceType')}"}</label>
              <select type="text" className="form-control" id="resourceType" name="resourceType" data-x-name="edit.resourceType">
                <option value="API">{"${t('ui.security.resource.resourceType.api')}"}</option>
                <option value="PAGE">{"${t('ui.security.resource.resourceType.page')}"}</option>
              </select>
            </div>
            {/* 资源路径 */}
            <div className="form-group x-form-required">
              <label htmlFor="resourcePath">{"${t('ui.security.resource.field.resourcePath')}"}</label>
              <input type="text" className="form-control" id="resourcePath" name="resourcePath" data-x-name="edit.resourcePath"
                placeholder={"${t('ui.system.common.placeholder.inputTextLimitLength', 1, 500)}"} />
            </div>

            {/* 访问方式 */}
            <div className="form-group x-form-required">
              <label htmlFor="accessMethod">{"${t('ui.security.resource.field.accessMethod')}"}</label>
              <select type="text" className="form-control" id="accessMethod" name="accessMethod" data-x-name="edit.accessMethod">
                <option value="*">*</option>
                <option value="GET">GET</option>
                <option value="POST">POST</option>
                <option value="PUT">PUT</option>
                <option value="DELETE">DELETE</option>
              </select>
            </div>
            {/* 访问策略 */}
            <div className="form-group x-form-required">
              <label htmlFor="accessPolicy">{"${t('ui.security.resource.field.accessPolicy')}"}</label>
              <select type="text" className="form-control" id="accessPolicy" name="accessPolicy" data-x-name="edit.accessPolicy"
                defaultValue="GRANTED">
                <option value="ANONYMOUS">{"${t('ui.security.resource.accessPolicy.anonymous')}"}</option>
                <option value="AUTHENTICATED">{"${t('ui.security.resource.accessPolicy.authenticated')}"}</option>
                <option value="GRANTED">{"${t('ui.security.resource.accessPolicy.granted')}"}</option>
              </select>
            </div>

            {/* 冻结标志 */}
            <div className="form-group x-form-required">
              <label htmlFor="frozenFlag">{"${t('ui.security.resource.field.frozenFlag')}"}</label>
              <select type="text" className="form-control" id="frozenFlag" name="frozenFlag" data-x-name="edit.frozenFlag"
                defaultValue="false">
                <option value="true">{"${t('ui.system.common.option.bool.true')}"}</option>
                <option value="false">{"${t('ui.system.common.option.bool.false')}"}</option>
              </select>
            </div>
            {/* 备注 */}
            <div className="form-group">
              <label htmlFor="remark">{"${t('ui.security.resource.field.remark')}"}</label>
              <input type="text" className="form-control" id="remark" name="remark" data-x-name="edit.remark"
                placeholder={"${t('ui.system.common.placeholder.inputTextLimitLength', 0, 50)}"} />
            </div>
          </form>
        </ModalBody>
        <ModalFooter confirmLabel="${t('ui.system.common.btn.save')}" cancelLabel="${t('ui.system.common.btn.cancel')}" />
      </ModalDialog>
    </div>

    <script src="${appJs('app/security/resource/resource-management.js')}" type="text/javascript"></script>
  </AppView>
</>
